<template>
  <el-form
    ref="formRef"
    :model="form"
    label-width="100px"
    style="text-align: center; padding-bottom: 10px"
  >
    <!-- :action="baseurl + 'user/uploadImage'" 
   
      :headers="headers"-->
    <!-- 使用自定义方法上传图片 -->
    <!-- <el-upload
      class="avatar-uploader"
      drag
      :show-file-list="false"
      action="#"
      :http-request="uploadSectionFile"
      show-file-list="false"
      :before-upload="beforeAvatarUpload"
    >
      <img v-if="imageUrl" :src="imageUrl" class="avatar" />
      <el-icon v-else class="avatar-uploader-icon">
        <Plus />
      </el-icon>
    </el-upload> -->
    <!-- 使用elplus组件上传图片 -->
    <el-upload
      name="avatar"
      :headers="headers"
      class="avatar-uploader"
      :action="baseurl + 'user/uploadImage'"
      :show-file-list="false"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload"
    >
      <img v-if="imageUrl" :src="imageUrl" class="avatar" />
      <el-icon v-else class="avatar-uploader-icon">
        <Plus />
      </el-icon>
    </el-upload>
    <el-button @click="handleConfirm">确认更换</el-button>
  </el-form>
</template>
<script setup>
import { defineProps, ref } from "vue";
import { uploadImage, updateAvatar } from "@/api/user";
import { baseURL } from "@/util/config";
import { ElMessage } from "element-plus";
import { Plus } from "@element-plus/icons-vue";
import store from "@/store";
const props = defineProps({
  user: {
    type: Object,
    default: () => {},
    required: true,
  },
});
const fileList = ref([]);
const baseurl = ref(baseURL);
console.log(baseurl.value, baseURL, "baseURL");

const headers = ref({
  Authorization: "Bearer " + localStorage.getItem("access_token"),
});
const form = ref({
  id: -1,
  avatar: "",
});
const formRef = ref(null);
const imageUrl = ref("");
form.value = props.user;
imageUrl.value = baseURL + "media/userAvatar/" + form.value.avatar;
const handleAvatarSuccess = (res) => {
  console.log(res, "res");
  imageUrl.value = baseURL + "media/userAvatar/" + res.title;
  form.value.avatar = res.title;
  
};
const beforeAvatarUpload = (file) => {
  const isJPG = file.type === "image/jpeg";
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isJPG) {
    ElMessage.error("图片必须是jpg格式");
  }
  if (!isLt2M) {
    ElMessage.error("图片大小不能超过2M!");
  }
  return isJPG && isLt2M;
};
// 上传头像
//获得文件列表
const handleChange = async (file, fileList) => {
  // this.fileList = fileList;
};
const uploadSectionFile = async (file) => {
  // const imageUrl = "";
  console.log(file.file, "fileList1111111");

  const isJPG =
    file.file.type === "image/jpeg" ||
    file.file.type === "image/png" ||
    file.file.type === "image/jpg";
  const isLt2M = file.file.size / 1024 / 1024 < 2;
  if (!isJPG) {
    ElMessage.error("图片必须是jpg格式或png格式");
    return false;
  }
  if (!isLt2M) {
    ElMessage.error("图片大小不能超过5M!");
    return false;
  }
  // 把图片转换成formdata格式
  if (file) {
    console.log(file, "file");

    const formData = new FormData();
    formData.append("avatar", file);
    console.log("FormData内容: ", formData.entries().next().value);
    let result = await uploadImage(formData);
  }
};

// 更换头像
const handleConfirm = async () => {
  console.log("确认", form.value);

  let result = await updateAvatar(form.value);
  console.log(result);

  let data = result.data;
  if (data.status == 200) {
    ElMessage.success("执行成功！");
    sessionStorage.setItem("userInfo", JSON.stringify(form.value));
    store.dispatch("getUserInfo", props.user.id);
  } else {
    ElMessage.error(data.errorInfo);
  }
};
</script>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
.avatar {
  width: 120px;
  height: 120px;
  display: block;
}
</style>
